<template>
  <div class="aside-template">
    <div class="title">优惠券</div>
    <div class="content">
      <div class="item" v-for="(item, index) of modules" :key="index" @click="onAdd(item.value)">
        <i class="iconfont" :class="item.icon" />
        <em>{{item.name}}</em>
      </div>
    </div>
    <div class="list">
      <div class="expect"><span>优惠券模板，敬请期待</span></div>
    </div>
  </div>
</template>

<script>
import { uuid } from '../../../../common/'
import { STORE_NAMESPACE, categoryConstants, typeConstants } from '../../../../config'
import { mapState } from 'vuex'
export default {
  name: 'AsideCoupon',
  data () {
    return {
      modules: [
        {
          name: '优惠券模块',
          icon: 'icon-youhuiquan1',
          value: typeConstants.COUPON_1
        },
        // {
        //   name: '裂变优惠券',
        //   icon: 'icon-liebianyouhuiquan',
        //   value: typeConstants.COUPON_2
        // }
      ]
    }
  },
  computed: {
    ...mapState({
      shopId: state => state[STORE_NAMESPACE].shopId
    })
  },
  methods: {
    onAdd (type) {
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        type: 'push',
        value: {
          uuid: uuid(this.shopId, categoryConstants.COUPON),
          category: categoryConstants.COUPON,
          type: type,
          isMarginBottom: true, // 是否显示与下边的间隔
          elements: []
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>